<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>电影信息列表</title>
    <script src="../js/jquery.js"></script>
</head>
<style>
    table,table td{
        margin-top: 10px;
        border: 1px solid #333
    }
</style>
<body>
<div>
    <h1>电影信息列表</h1>
    <input type="button" value="添加电影" id="add">
    <table>
        <tr>
            <td>电影名称</td>
            <td>电影类型</td>
            <td>电影价格</td>
            <td>是否推荐</td>
            <td>上映时间</td>
            <td>下映时间</td>
            <td>投票数</td>
        </tr>
    </table>
    <p>
        <a href="#" id="homePage">首页</a>
        <a href="#" id="upPage">上一页</a>
        <a href="#" id="nextPage">下一页</a>
        <a href="#" id="endPage">页尾</a>
        第<span id="page">1</span>页，共<span id="allPage">0</span>页，总记录数<span id="allNumber">0</span>条
    </p>
</div>
</body>
</html>
<script>
    $("#add").click(function (){
        window.location.href = "add.jsp"
    })

    //当页面打开执行的代码
    $(document).ready(function () {
        //加载数据
        showTable(0) // 加载 table 中的数据, 由于我们做的是后端sql分页，所以我们需要传值page ，传入0 是第一页的意思
        showAllNumber() // 加载总记录数,并且通过总记录数计算页数
    })

    // 加载 table 中的数据
    function showTable(page) {
        let opr = "selectMovie"
        $.ajax({
            'url': '../MovieServlet.action',
            'type': 'post',
            'data': {opr,page},
            'dataType': 'json',
            'success': showTableSuccess
        })
    }
    function showTableSuccess(data) {
        console.log(data)
        //清空 table
        $("table tr:not(:first)").remove();
        //使用forEach 遍历 data
        data.forEach(dd => {
            $('table').append(`<tr>
            <td>`+dd.movieName+`</td>
            <td>`+dd.movieType+`</td>
            <td>`+dd.price+`</td>
            <td>`+dd.recommend+`</td>
            <td>`+formatDate(dd.startTime)+`</td>
            <td>`+formatDate(dd.endTime)+`</td>
            <td>`+dd.votes+`</td>
        </tr>`)
        })
    }


    // 获取总条数
    function showAllNumber() {
        let opr = "selectAllNumber"
        $.ajax({
            'url': '../MovieServlet.action',
            'type': 'post',
            'data': {opr},
            'dataType': 'json',
            'success': showAllNumberSuccess
        })
    }
    function showAllNumberSuccess(data) {
        $('#allNumber').html(data)
        if ((data%2)>0){
            $('#allPage').html((data%2)+1)
        }else {
            $('#allPage').html((data%2))
        }
    }



    function formatDate(timestamp) {
        // 创建一个新的Date对象，传入时间戳作为参数
        var date = new Date(timestamp);

        // 获取年、月和日
        var year = date.getFullYear();
        var month = date.getMonth() + 1; // getMonth()返回的月份是从0开始的，所以需要加1
        var day = date.getDate();

        // 如果月份或日期是一位数，则在前面添加一个'0'
        if (month < 10) {
            month = '0' + month;
        }
        if (day < 10) {
            day = '0' + day;
        }

        // 拼接成yyyy-MM-dd格式的字符串
        var formattedDate = year + '-' + month + '-' + day;

        return formattedDate;
    }

    // 首页
    $('#homePage').click(function (){
        showTable(0) // 展示第一页
    })

    // 上一页
    $('#upPage').click(function (){
        if ($('#page').html() > 1){
            showTable(($('#page').html()-2))
            $('#page').html(($('#page').html()-1))
        }else {
            alert("已经是第一页！！！")
        }
    })

    // 下一页
    $('#nextPage').click(function (){
        let page = $('#page').html()
        let allPage = $('#allPage').html()
        if (page < allPage){
            showTable(++page)
            $('#page').html(page)
        }else {
            alert("已经是最后一页！！！")
        }
    })

    // 尾页
    $('#endPage').click(function (){
        showTable($('#allPage').html())
        $('#page').html($('#allPage').html())
    })
</script>
